<template>
    <div class="character-manager">
      <!-- <h1>角色属性管理</h1>
      <input type="text" ref="nameInput" placeholder="角色名称" />
      <input type="number" v-model="" placeholder="生命值" />
      <input type="number" v-model="" placeholder="攻击力" />
      <input type="number" v-model="" placeholder="防御力" />
      <button @click="addCharacter">添加角色</button> -->
      
      
        <!-- <AttributeList>
        <template>
          <div class="character-item">
            <p><strong>{{ character.name }}</strong></p>
            <p>生命值: {{ character.health }}, 攻击力: {{ character.attack }}, 防御力: {{ character.defense }}</p>
             <button>删除</button>
          </div>
        </template>
      </AttributeList> -->
    </div>
  </template>
    
<script setup lang='ts'>
import { reactive } from 'vue';
import AttributeList from './components/AttributeList.vue';

    let character = reactive([
        {
            id:1,
            health:800,
            attack:5,
            defense:1
        },
    ])


</script>
    
<style scoped>
.character-manager {
  width: 400px;
  margin: auto;
  text-align: left;
}

.character-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
</style>